<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react原理</title>
</head>

<body>
    <div id="root"></div>
    <p>
        // 原版
        // const div = document.createElement('div');
        // const p = document.createElement('p');
        // const span = document.createElement('span');
        // div.appendChild(p);
        // div.appendChild(span);
        // span.innerText = '我是一个span';
        // document.body.appendChild(div);

        // 第一次优化--创建函数
        // const div = createElement('div');
        // const p = createElement('p');
        // const span = createElement('span');
        // div.appendChild(p);
        // div.appendChild(span);
        // span.innerText = '我是一个span';
        // document.body.appendChild(div);

        // function createElement(tagName) {
        // return document.createElement(tagName);
        // }

        // 第二次优化--接收子函数
        // const div = createElement('div');
        // const p = createElement('p');
        // const span = createElement('span');
        // div.appendChild(p);
        // div.appendChild(span);
        // span.innerText = '我是一个span';
        // document.body.appendChild(div);

        // function createElement(tagName, children) {
        // const element = document.createElement(tagName);
        // if (children) {
        // element.appendChild(children)
        // }
        // return element;
        // }

        // 第三次优化--接收并返回子函数
        // const div = createElement('div', createElement('p', createElement('span', 'hi')));
        // document.body.appendChild(div);

        // function createElement(tagName, children) {
        // const element = document.createElement(tagName);
        // if (children) { // 接收一个元素，不接收字符串
        // if (typeof children === 'string') {
        // var childElement = document.createTextNode(children); // 创建一个文本节点
        // element.appendChild(childElement);
        // } else {
        // element.appendChild(children);
        // }
        // }
        // return element;
        // }

        // 第四次优化--模仿原理结构
        // const div = (
        // t('div',
        // t('p',
        // t('span', 'hi')))
        // );
        // document.body.appendChild(div);

        // function t(tagName, children) {
        // const element = document.createElement(tagName);
        // if (children) { // 接收一个元素，不接收字符串
        // if (typeof children === 'string') {
        // var childElement = document.createTextNode(children); // 创建一个文本节点
        // element.appendChild(childElement);
        // } else {
        // element.appendChild(children);
        // }
        // }
        // return element;
        // }

        // react原理--虚拟dom
        // import React from 'react'
        // import ReactDOM from 'react-dom'
        // // 利用createElement方法创建一个虚拟的div
        // const div = (
        // React.createElement('div', null,
        // React.createElement('p', null,
        // React.createElement('span', null, 'hi')))
        // );
        // console.log(div); // 不是element 而是虚拟的element--就是一个对象
        // // document.body.appendChild(div) // 会提示这个参数不是一个节点，而是一个假的节点--虚拟dom
        // // 用render方法挂载到body下面 public目录下的html文件有root这个id属性
        // ReactDOM.render(div, document.getElementById('root'));
    </p>
</body>

</html>